<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>后台管理登录</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
</head>
<body>


<div class="text-center" id="app">

    <div style="width: 400px; margin: 0 auto; margin-top: 100px;">
        <h3 style="font-weight: bold;color: #00c4ff;margin-bottom: 20px;" >后台管理登录</h3>
        <form id="formData" class="form-horizontal list-group-item">
            <div class="form-group" style="margin: 10px;">
                <label class="navbar-left">账号</label>
                <input type="text" v-model="user.username" class="form-control" name="username" placeholder="账号" @keyup.enter="submit">
            </div>
            <div class="form-group" style="margin: 10px;">
                <label class="navbar-left">密码</label>
                <input type="password" v-model="user.password" class="form-control" name="password" placeholder="密码"  @keyup.enter="submit">
            </div>
            <div class="form-group" style="margin: 10px;">
                <label class="navbar-left">记住我</label>
                <input type="checkbox" v-model="user.me" name="me" class="navbar-left" style="margin-left: 10px;" @keyup.enter="submit"/>
            </div>
            <div class="form-group" style="margin: 10px;">
                <button type="button" @click="submit" class="btn btn-success btn-block" style="width: 100%;">登录</button>
            </div>
        </form>
    </div>


</div>

<script th:src="@{/lib/vue/vue.min.js}"></script>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script th:src="@{/js/jquery.min.js}"/>
<script th:src="@{/js/bootstrap.min.js}"></script>

<script>

    var vue = new Vue({
        el:"#app",
        data:{
            user:{
                username:null,
                password:null,
                me:null
            }
        },
        methods:{
            submit:function(){
                if(this.user.username!=null&&this.user.password!=null){
                    this.user.me = this.user.me==true?1:0;
                    var that = this;
                    $.ajax({
                        type:"post",
                        url:"/blogs/login",
                        data:JSON.stringify(that.user),
                        dataType:"json",
                        contentType: "application/json;charset=utf-8",
                        success:function(res){
                            if(res.status==0){
                                alert(res.msg);
                            }else{
                                window.location.href="/blogs/admin/indexList.html";
                            }
                        },
                        error:function(res){
                            alert("登录失败，请检查网络!");
                        }
                    })
                }else{
                    alert("请输入账号和密码。")
                }
            }
        }
    })

</script>

</body>
</html>